<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<div id="target"></div>
<script>
setup(() => {
  for (let name of ['--a', '--b']) {
    CSS.registerProperty({
      name,
      syntax: '<number>',
      initialValue: '0',
      inherits: false,
    });
  }
});

test(() => {
  let a = target.animate({'--a': ['100', 'var(--b)']}, 100);
  let b = target.animate({'--b': ['200', '200']}, 100);

  a.currentTime = 50;
  assert_equals(getComputedStyle(target).getPropertyValue('--a'), '150', '--a animating towards --b');
  assert_equals(getComputedStyle(target).getPropertyValue('--b'), '200', '--b stationary at 200');

  a.cancel();
  b.cancel();

  a = target.animate({'--a': ['200', '200']}, 100);
  b = target.animate({'--b': ['100', 'var(--a)']}, 100);

  b.currentTime = 50;
  assert_equals(getComputedStyle(target).getPropertyValue('--a'), '200', '--a stationary at 200');
  assert_equals(getComputedStyle(target).getPropertyValue('--b'), '150', '--b animating towards --a');
}, 'The resolution order of var() references in animated registered custom properties is independent of the lexicographical ordering of property names.');
</script>
